<template>
	<el-dialog v-model="dialogFormVisible" :title="'修改' + name + '密码'" width="500">
		<el-form ref="dataFormRef" :rules="dataRules" :model="form" @keyup.enter="changePassword()">
			<el-form-item prop="password" label="新密码">
				<el-input v-model="form.password" placeholder="请输入新密码" clearable />
			</el-form-item>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button type="primary" @click="changePassword()">确定</el-button>
				<el-button @click="dialogFormVisible = false"> 取消 </el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script lang="ts" setup name="changePasswordDialog">
import { reactive, ref } from 'vue'
import { changePasswordApi } from '@/api/sys/user'
import { ElMessage } from 'element-plus'

const dialogFormVisible = ref(false)
const dataFormRef = ref()
const form = reactive({
	password: '',
	id: 0
})
const name = ref('')

const dataRules = ref({
	password: [{ required: true, message: '密码不能为空', trigger: 'blur' }]
})
const openDialog = (row: any) => {
	form.id = row.id
	dialogFormVisible.value = true
	name.value = row.username
}
const emit = defineEmits(['refresh'])
const changePassword = () => {
	dataFormRef.value.validate((valid: boolean) => {
		if (!valid) {
			return false
		}

		changePasswordApi(form).then((r: any) => {
			ElMessage.success('修改成功')
			dialogFormVisible.value = false
			dataFormRef.value.resetFields()
		})
	})
}
defineExpose({ openDialog })
</script>
